<template>
  <div class="page-carousel-min">
    <img class="carouse-max-img" :src="maxImg" />
    <div class="carousel-slider">
      <!-- <div @click="carouselPrev" class="carousel-prev"><a-icon type="left" /></div> -->
      <div class="carousel-slider-list" :style="'left:'+left+'px'">
        <img @click="switchmMax(index)" v-for="(item, index) in carouselList" :key="index" :src="item" />
      </div>
      <!-- <div @click="carouselNext" class="carousel-next"><a-icon type="right" /></div> -->
    </div>
</div>
</template>
<script>
	export default {
	  data() {
	    return {
        maxImg: '',
        left: 0,
        step: 115
	    }
	  },
    props: {
      carouselList: {
        type: Array,
        default: () => {
          return [];
        }
      },
    },
    created() {
      this.maxImg = this.carouselList[0];
    },
	  methods: {
      switchmMax(i) {
        this.maxImg = this.carouselList[i];
      },
      carouselPrev(){
        if (this.left<0) {
          this.left = this.left + this.step;
        }
      },
      carouselNext(){
        if (Math.abs(this.left)<this.step*(this.carouselList.length-3)) {
          this.left = this.left - this.step;
        }
      }
	  }
}
</script>
<style lang="scss">
.page-carousel-min{
  .carousel-slider{
    overflow: hidden;
    position: relative;
  }
  .carouse-max-img{
    width: 330px;
    height: 210px;
    margin-bottom: 10px;
  }
  .carousel-slider-list{
    width: 10000px;
    position: relative;
    left: 0;
    img{
      width: 105px;
      height: 60px;
      cursor: pointer;
      margin-right: 10px;
    }
  }
  .carousel-prev,.carousel-next{
    width: 14px;
    height: 60px;
    background: rgba(0,0,0,0.6);
    position: absolute;
    top: 0px;
    cursor: pointer;
    color: #ffffff;
    line-height: 60px;
    z-index: 2;
  }
  .carousel-prev{
    left: 0px;
  }
  .carousel-next{
    right: 0px;
  }
}
</style>